<template>
  <!-- 员工管理页 -->
  <div class="product">
    <!-- 导航栏 -->
    <div class="header">
      <!-- 添加按钮 -->
      <el-button
        type="primary"
        class="buttonStyle"
        @click="addStaff"
      >添加</el-button>
      <!-- 产品名称输入框 -->
      <el-input
        v-model="StallName"
        placeholder="请输入用户名"
        clearable
        style="width: 240px"
      />
      <!-- 员工状态下拉列表 -->
      <el-select v-model="stallStatus" clearable placeholder="请选择状态">
        <el-option label="正常" value="正常" />
        <el-option label="禁用" value="禁用" />
      </el-select>
      <!-- 查询 -->
      <el-button type="primary" @click="queryStall">查询</el-button>
    </div>
    <!-- 表格主体 -->
    <div class="content">
      <el-table :data="stallData" style="width: 100%">
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" align="center" />
        <!-- 用户名 -->
        <el-table-column prop="username" label="用户名" align="center" />
        <!-- 姓名 -->
        <el-table-column prop="realname" label="姓名" align="center" />
        <!-- 手机号 -->
        <el-table-column prop="telephone" label="手机号" align="center" />
        <!-- 性别 -->
        <el-table-column prop="gender" label="性别" align="center" />
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status =='正常' ? 'success' : 'info'">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope"> <!--作用域插槽 -->
            <el-button type="text" size="small" @click="editStall(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              style="color:red"
              @click="
                Idstalldelete = scope.row.id;
                dialogVisible2 = true;
              "
            >
              删除
            </el-button>
            <el-button type="text" size="small" style="color:rgb(58,113,168)" @click="detail(scope.row.id)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :hide-on-single-page="valuerf"
        :page-sizes="[2, 4, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <!-- 表单区域 -->
      <el-form
        ref="stallRuleForm"
        :model="StallForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="StallForm.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="StallForm.realname" />
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model.number="StallForm.telephone" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.number="StallForm.password" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="StallForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('stallRuleForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框二 -->
    <el-dialog title="提示" :visible.sync="dialogVisible3" width="30%">
      <!-- 表单区域 -->
      <el-form
        ref="stallRuleForm"
        :model="StallForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="StallForm.username" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="StallForm.realname" />
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model.number="StallForm.telephone" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model.number="StallForm.password" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="StallForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="gender">
          <el-radio-group v-model="StallForm.status">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="禁用">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose2">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm2('stallRuleForm')"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
      <span>是否删除该员工</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="offStall()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
// 引入vuex的辅助函数
// 引入文件上传路径 和 文件预览的路径
export default {
  data() {
    return {
      StallName: null, // 员工姓名
      stallStatus: null, // 员工状态
      valuerf: false, // 在只有一页的时候禁止翻页
      pageSize: '2', // 每页显示条目个数
      total: 7, // 总条目数
      currentPage: '1', // 当前的页码
      stallData: [], // 从接口获取的总信息
      limit: 1,
      queryData: [],
      dialogVisible: false,
      dialogVisible3: false,
      StallForm: {
        username: '',
        realname: '',
        telephone: '',
        password: '',
        gender: '',
        roleId: '',
        status: null
      },
      visible: false,
      dialogVisible2: false,
      Idstalldelete: 0,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        telephone: [],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }]
      }
    }
  },
  computed: {},
  created() {
    this.getAllstallData()
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllstallData()
    },
    handleCurrentChange(val) { // 当前页面数
      this.currentPage = val
      this.getAllstallData()
    },
    async getAllstallData() { // 获取整个页面数据
    if(this.StallName==''){
        this.StallName=null
      }
      if(this.stallStatus==''){
        this.stallStatus=null
      }
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
        username: this.StallName,
        roleId: '1',
        status: this.stallStatus
      }
      const res = await get('/baseUser/pageQuery', {
        ...data,
        ...this.queryData
      })
      this.stallData = res.data.list
      for (const k in this.stallData) {
        if (this.stallData[k].gender == 'male') {
          this.stallData[k].gender = '♂'
        } else {
          this.stallData[k].gender = '♀'
        }
      }
      console.log(this.stallData)
      this.total = res.data.total
    },
    async deleteStall(row) { // 删除操作
      const res = await get('/role/deleteById', row)
    },
    queryStall() {
      const data = {
        // 产品名称
        name: this.StallName,
        // 产品状态
        status: this.stallStatus,
        roleId: '1'
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
      }
      this.querydata = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载产品数据
      this.getAllstallData()
    },
    addStaff() {
      // 清空表单对象
      (this.StallForm = { roleId: 1, status: null }),
      // 设置模态框的标题
      (this.dialogTitle = '添加产品')
      // 模态框显示出来
      this.dialogVisible = true
    },
    submitForm(stallRuleForm) {
      this.StallForm.telephone = this.StallForm.telephone.toString()
      this.StallForm.password = this.StallForm.password.toString()
      console.log(this.StallForm)
      this.$refs[stallRuleForm].validate(async valid => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/baseUser/addUserWidthRole/', this.StallForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据

            this.getAllstallData()
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submitForm2(stallRuleForm) {
      console.log('我是第二个')
      this.StallForm.telephone = this.StallForm.telephone.toString()
      this.StallForm.password = this.StallForm.password.toString()
      console.log(this.StallForm)
      this.$refs[stallRuleForm].validate(async valid => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/baseUser/saveOrUpdate', this.StallForm)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据

            this.getAllstallData()
            // 调用关闭模态框的方法
            this.dialogClose2()
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    dialogClose() {
      // 重置表单
      this.$refs['stallRuleForm'].resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible = false
      }, 200)
    },
    dialogClose2() {
      // 重置表单
      this.$refs['stallRuleForm'].resetFields()
      this.StallForm = this.StallForm
      // 关闭模态框
      setTimeout(() => {
        this.dialogVisible3 = false
      }, 200)
    },
    async offStall() {
      const data = {
        id: this.Idstalldelete
      }
      const res = await get('/baseUser/deleteById', data)
      this.dialogVisible2 = false
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllstallData()
      } else {
        this.$message.error(res.message)
      }
    },
    editStall(row) {
      // 将当前点击的这一行的对象 赋值到 表单对象里
      // 浅拷贝 赋值对象的引用 对象的内存地址 用的还是用一个
      // 深拷贝
      this.dialogVisible3 = true
      // 设置模态框的标题
      console.log(row)
      for (const key in row) {
        if (!row[key]) {
          delete row[key]
        }
      }
      if (row.gender == '♂') {
        row.gender = 'male'
      } else {
        row.gender = 'female'
      }
      this.getAllstallData()
      this.StallForm = row
      this.dialogTitle = '编辑员工'
      // 模态框显示出来
    },
    // 点击跳转，通过id向员工详情页传值
    detail(id) {
      this.$router.push({
        // 路径
        path: '/admin/waiter/Details',
        // 传递的参数
        query: { id }
      })
    }
  }
}
</script>
<style scoped>
.header {
  line-height: 40px;
}
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
